<template>
  <div class="m-home-wrap">
    <div class="m-home-body">
      <div class="m-home-body-header">科学探究 教师端</div>
      <div class="log-out"
           @click="handleLogOut()">退出登录</div>
    </div>
    <div class="navbox">
      <van-tree-select v-model:main-active-index="activeIndex"
                       height="100%"
                       :items="items">
        <template #content>
          <course-main v-if="activeIndex === 0"></course-main>
          <stu-main v-if="activeIndex === 1"></stu-main>
        </template>
      </van-tree-select> 
    </div>
 
  </div>
</template>
<script>
import { getCurrentInstance, ref } from 'vue'
import StuMain from './StuMain.vue'
import CourseMain from './CourseMain.vue'
import { localRemove } from '../../utils/auth'
import { Toast } from 'vant'
export default {
  setup () {
    const { proxy } = getCurrentInstance()
    const activeIndex = ref(0)
    function handleClick (val) {
      proxy.$router.push(val) 
    }
    function handleLogOut () {
      localRemove('STEM_TOKEN')
      proxy.$router.push('/login')
      // 等后端修好了再加上
      // proxy.$axios.user.logout().then(res => {
      //   if (res.status === 200) {
      //     Toast('用户已下线')
      //   } else {
      //     console.log(res)
      //   }
      // })
    }
    return {
      handleClick,
      activeIndex,
      handleLogOut,
      items: [{ text: '课程管理' }, { text: '学生管理' }]
    }
  },
  components: {
    StuMain, CourseMain
  }
}
</script>
<style lang="scss" >
.van-tree-select__nav {
  flex: 0.3;
}
.navbox {
  height: 100vh;
}
.m-home {
  &-wrap {
    background-color: $theme-color1;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    justify-content: space-between;
  }
  &-body {
    width: 100%;
    position: relative;
    .log-out {
      position: absolute;
      right: 10px;
      top: 20px;
    }
    &-header {
      height: 60px;
      font-size: $fontsize-1;
      line-height: 60px;
      padding-left: 10px;
    }
  }
}
</style>
